<template>
  <div class='audio-player'>
    <audio id='player' :src='songUrl' controls='controls' preload='auto' @canplay='startPlay' @ended='ended'
    ></audio>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: 'audioPlayer',
  props: {
    res: String
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters([
      'audioSongIsPlay',
      'audioSongUrl',
      'audioSongId'
    ])
  },
  watch: {
    audioSongIsPlay: function f () {
      this.togglePlay()
    }
  },
  methods: {
    // 获取连接后准备播放
    startPlay () {
      let player = document.querySelector('#player')
      player.play()
    },
    // 播放完成之后出发
    ended () {
      this.audioSongIsPlay = false
    },
    togglePlay () {
      let player = document.querySelector('#player')
      if (this.audioSongIsPlay) {
        player.play()
      } else {
        player.pause()
      }
    }
  }
}
</script>

<style>
.audio-player{
  display: inline;
}
</style>
